<template>
	<view class="content"style="padding-top: 44px;">
    <yue-nav-top @openMingxi="openMingxi"></yue-nav-top>
		<view class="drawBox">
			<view class="drawItem" v-for="(item, index) in dataList" :key="index">
				<view class="it-item" @click="item.status=='2'||item.status=='1'?tomingxi(item):''">
					<view class="it-item-1" :class="item.status=='2'||item.status=='1'?'red':'gray'">{{item.status=='2'||item.status=='1'?'+':'-'}}{{item.money}}</view>
			     <view class="red it-item-1" :class="item.status=='2'||item.status=='1'?'red':'gray'"  v-if="item.status=='1'"> 待结算 </view>
					<view class=" it-item-1" v-if="item.status=='3'"  :style="item.status=='1'?'flex: 1.3;':''">
						转给
					<view class="image-wrapper" v-if="item.pay_type=='51'"><image src="@/static/img/bank-card.png" mode="aspectFit"></image></view>
					<view class="image-wrapper" v-if="item.pay_type=='52'"><image src="@/static/img/pay-icon2.png" mode="aspectFit"></image></view>
					{{item.pay_name}}
				</view>
				<view class=" it-item-1" v-if="item.status!='3'"  :style="item.status=='1'?'flex: 1.3;':''">
				{{item.beizu}}
          <view class="image-wrapper" v-if="item.status=='2'||item.status=='1'" style="display:flex;align-items: center"><image  style="width: 30rpx;
          height: 30rpx;"src="@/static/img/right.png" mode="aspectFit"></image></view>
				</view>
				</view>
				<view class="it-item">
					<view class="gray it-item-1">{{ item.character }}</view>
					<view class="gray it-item-1">{{item.createtime}}</view>
				</view>
			</view>
			<uni-load-more :status="loadingType":contentText="{
						contentdown: '法力 守护美好生活',
						contentrefresh: '正在加载...',
						contentnomore: '法力 守护美好生活'
					}"></uni-load-more>
		</view>
    <uni-popup ref="offerPopop" type="bottom"  @change="removeCss($event)">
      <view class="popup-bottom-box">
        <view class="bot-title">
          <view class="title-txt">余额明细说明</view>
          <view class="title-close" @click="closePop('offerPopop')">
            <view class="image-wrapper">
              <image src="@/static/img/close.png" mode="aspectFit"></image>
            </view>
          </view>
        </view>
        <scroll-view scroll-y="true" class="bot-con bot-con1">
          <view class="title"> <div class="leftpoint">·</div> 待结算款项，在服务完成或服务解除后，即可结算并提现。</view>
          <view class="title"> <div class="leftpoint">·</div> 用户下单时，通过微信付款的，每笔付款，微信扣收千分 之九的通道费。</view>
          <view class="title"> <div class="leftpoint">·</div> 用户下单时，通过支付宝付款的，每笔付款，支付宝扣收 千分之五点四的通道费。</view>
          <view class="title"> <div class="leftpoint">·</div> 用户下单时，通过法力平台余额付款的，每笔付款，法力 平台不扣收通道费。</view>
          <view class="title"> <div class="leftpoint">·</div> 营销收益、法务收益属于个人所得，根据税法规定，需要 向国家支付20%的个人所得税。申报纳税事宜由法力平台 代您向税局申报开票，代扣代缴。</view>
          <view class="title"> <div class="leftpoint">·</div> 律师收取律师费或投资人奖励后，由其律师事务所向付款 人开具发票。</view>
          <view class="title">  <div class="fontNormal">·</div> 投资人收取投资收益后，由投资人向付款人开具发票。</view>
        </scroll-view>
        <view class="bot-save">
          <view class="save-box" @click="closePop('offerPopop')">朕知道了</view>
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="minxiPopop" type="bottom"  @change="removeCss($event)">
      <view class="popup-bottom-box">
        <view class="bot-title">
          <view class="title-txt"></view>
          <view class="title-close" @click="closePop('minxiPopop')">
            <view class="image-wrapper">
              <image src="@/static/img/close.png" mode="aspectFit"></image>
            </view>
          </view>
        </view>
        <scroll-view scroll-y="true" class="bot-con" style="padding-left: 40px;padding-right: 40px;">
            <view class="mingxicontent">
              <view class="mingxi">收入金额</view>:  <view class="mingximoney"> {{ yuan_money }}元</view>
            </view>
          <view class="mingxicontent">
            <view class="mingxi">扣费明细</view>:  <view class="mingximoney">{{ fee_desc }}</view>
          </view>
          <view class="mingxicontent">
            <view class="mingxi yue"><span>余</span><span>额</span></view>:  <view class="mingximoney">{{ money }}元</view>
          </view>
        </scroll-view>
        <view class="bot-save">
          <view class="save-box" @click="closePop('minxiPopop')">朕知道了</view>
        </view>
      </view>
    </uni-popup>
		<!-- 全局通用组件 -->
		<law-common ref="lawCommon"></law-common>
	</view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
import $ from 'jquery'
export default {
	data() {
		return {
			dataList: [],
			page: 1, //分页加载
			loadingType: 'more', //加载更多状态
      yuan_money:'',// 收入金额
      fee_desc:'',// 扣费明细
      money:''// 余额
		};
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	onLoad() {
		this.init();
    this.gettopColor();
	},
	methods: {
    openMingxi(){
      this.$refs.offerPopop.open();
    },
    tomingxi(item){
      this.yuan_money = item.yuan_money;// 收入金额
      this.fee_desc = item.fee_desc;// 扣费明细
      this.money=item.money// 余额
      this.$refs.minxiPopop.open();
    },
    removeCss(e){
      this.is_poup = e.show
      if(this.is_poup){
        this.keyword = "";
        this.isshouci = true;
        $(document.body).css({'overflow':'hidden'})
      }else{
        $(document.body).css({'overflow':''})
      }
    },
    //判断顶部颜色
    gettopColor(){
      const nav = navigator.userAgent;
      if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
        phone.setStatusBarColor("#ffffff")
      } else if (!!nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        this.$bridge.callhandler('backgroundColorChange', {topColor:'#ffffff',bottomColor:"#ffffff"}, res => {});
      }
    },
		init() {
			this.loadData('refresh');
		},
		//带下拉刷新和上滑加载
			async loadData(type = 'add', loading) {
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						return;
					}
					this.loadingType = 'loading';
				} else if (type === 'refresh') {
					this.loadingType = 'loading';
					this.page = 1;
					this.dataList = [];
				} else {
					this.loadingType = 'more';
				}

				let formData = {
					page: this.page,
					pageSize:20,
					token: uni.getStorageSync('token')
				};
				let res = await this.$api('index.money_Mingxi', formData);
				let dataList = res.data.data;
				this.page++;
				this.dataList = this.dataList.concat(dataList);
				this.loadingType = res.data.current_page >= res.data.last_page ? 'nomore' : 'more';

			},
		},
		//加载更多
		onReachBottom() {
      console.log("===========this.iiii")
			this.loadData();
		}
};
</script>

<style lang="scss">
.mingxicontent{
  display: flex;
  padding: 5px;
}
.mingxi{
  padding-right: 5px;
  min-width: 62px!important;
}
.yue{
  display: flex;
  justify-content: space-between;
}
.mingximoney{
  padding-left: 10px;
}
::v-deep uni-page-wrapper{
  height: 100;
}
page{
	background-color: #FFFFFF;
  overflow-y: auto;
}
.content{
  height: 100%;
  overflow-y: auto;
}
.drawBox{
  width: 100% !important;
  height: 100% !important;
	padding: 0 30rpx 30rpx  30rpx;
  overflow-y: auto;
	.drawItem{
		padding-top: 20rpx;
		border-bottom: 1rpx solid #EEEEEE;
		.it-item{
			display: flex;
			justify-content: space-between;
			margin-bottom: 14rpx;
      .image-wrapper{
        height: 20px;
        padding: 0 2px;
        display: inline-block;
        ::v-deep uni-image{
          width: 20px;
          height: 20px;
        }
      }
      .it-item-1{
        flex:1;
        text-align: center;
      }
      .it-item-1:first-child{
        text-align: left;
      }
      .it-item-1:last-child{
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
		}
    .bold{
      font-weight: bold;
    }
	}

}
.popup-bottom-box {
  background-color: #ffffff;
  overflow: auto;
  overflow-x: hidden;
  .bot-title {
    display: flex;
    align-items: center;

    .title-txt {
      flex: 1;
      text-align: center;
      padding: 20rpx;
      font-weight: bold;
    }

    .title-close {
      width: 80rpx;
      height: 80rpx;
      text-align: center;
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;

      .image-wrapper {
        width: 26rpx;
        height: 26rpx;
        vertical-align: middle;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .remark-box{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60rpx;
    color: #777777;
    font-size: 24rpx;
  }
  .select-box{
    padding: 0rpx 40rpx;
    height: 100rpx;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .input-box{
      width: 530rpx;
      height: 60rpx;
      border: 1rpx solid #DCDCDC;
      border-radius: 6rpx;
      background: rgba(245, 245, 245, 0.59);
    }
    .input-placeholder-box{
      margin-left: 40rpx;
    }
    .select-all-box{
      width: 120rpx;
      height: 50rpx;
      border: 1rpx solid #F9B804;
      color: #F9B804;
      display: flex;
      justify-content: center;
      align-items: center;

    }
  }
  .assistant-title-box{
    margin-left: 140rpx;
    height: 30rpx;
    color: #777777;
    font-size: 24rpx;
  }
  .bot-con-no{
    height: 520rpx;
    text-align: center;
    padding-top: 64px;
    color: #aaa;
  }
  ::v-deep .uni-input-input{
    padding:0 18rpx;
  }
  .bot-con {
    padding: 0 30rpx;
    height: 110px;;
    // overflow-y: scroll;
    width: calc(100% - 140rpx);
    .service-list {
      margin-bottom: 20rpx;
    }
    .title{
      line-height: 23px;
      div{
        display: inline-block;
      }
      text-align: justify;
      padding-left: 8px;
      position: relative;
      .leftpoint{
        position:absolute;
        left:-1px;
        font-weight: normal;
      }
      .fontNormal{
        font-weight: normal;
      }
      .marginLeft5{
        display: inline-block;
        margin-right:8px;
      }
    }
    .bot-title-box{
      display: flex;
      align-items: center;
      .icon-box{
        width: 12rpx;
        height: 30rpx;
        background: #FFC900;
        opacity: 1;
        border-radius: 6rpx;
      }
      .title-text-box{
        margin-left: 5rpx;
        height: 45rpx;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #000000;
        opacity: 1;
      }
      .bot-content-box{
        margin: 10rpx 0rpx 10rpx 17rpx;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(0,0,0,0.6);
        opacity: 1;
        span{
          color: #000;
          font-weight: 600;
        }
      }
    }
    .bot-title-two-box{
      display: flex;
      .icon-box{
        margin-top: 5rpx;
        width: 12rpx;
        height: 30rpx;
        background: #FFC900;
        opacity: 1;
        border-radius: 6rpx;
      }
      .bot-content-box{
        margin: 0rpx 0rpx 0rpx 17rpx;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 40rpx;
        color: rgba(0,0,0,0.6);
        opacity: 1;
        span{
          color: #000;
          font-weight: 600;
        }
      }
    }
    .bot-content-box{
      margin: 10rpx 0rpx 10rpx 17rpx;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(0,0,0,0.6);
      opacity: 1;
      line-height: 48rpx;
      text-align: justify;
      span{
        color: #000;
        font-weight: 600;
      }
    }
    .bot-content-img-box{
      margin: 10rpx 0rpx 10rpx 17rpx;
      display: flex;
      image{
        width: 300rpx;
        height: 420rpx;
      }
    }
    .line-box{
      width: 100%;
      height: 1rpx;
      border: 1px solid #D5D5D5;
      background-color: #D5D5D5;
      margin: 15rpx 0rpx;
    }
    .stage-item-box{
      width: 100%;
      height: 60rpx;
      margin: 20rpx 0rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left-box{
        display: flex;
        align-items: center;
        .icon-box{
          width: 12rpx;
          height: 30rpx;
          background: #FFC900;
          opacity: 1;
          border-radius: 6rpx;
        }
        .title-box{
          margin-left: 5rpx;
          font-size: 32rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #000000;
        }
      }
      .right-box{
        width: 16rpx;
        height: 40rpx;
        margin-left: 20rpx;
        image {
          width: 100%;
          height: 100%;
          vertical-align: middle;
        }
      }
    }
    .lang-item-box{
      margin: 10rpx 0rpx 10rpx 40rpx;
      width: calc(100% - 20rpx);
      height: 80rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .icon-box{
        width: 40rpx;
        height: 40rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .content-box{
        width: calc(100% - 100rpx);
        height: 80rpx;
        line-height: 80rpx;
        border-bottom: 2rpx solid rgba(136,136,136,0.6);
      }
    }
    .lawyer-con {
      margin-bottom: 20rpx;
      display: flex;
      border-radius: 30rpx;
      border: 1rpx solid #DCDCDC;
      padding: 10rpx 20rpx;
      // box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.16);
    }
    .lawyer-left {
      font-weight: bold;
      width: 100rpx;
      margin-right: 30rpx;
      .image-wrapper {
        width: 100rpx;
        height: 100rpx;
        border-radius: 20rpx;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
    .lawyer-right {
      flex: 1;
      .lawyer-name {
        display: flex;
        margin-bottom: 20rpx;
        justify-content: space-between;
        .name-left {
          font-size: 16px;
          font-weight: bold;
          margin-right: 10px;
        }
        .name-right {
          padding-left: 10rpx;
          .image-wrapper {
            width: 30rpx;
            height: 30rpx;
            image {
              vertical-align: middle;
              width: 100%;
              height: 100%;
            }
          }
        }
        .name-center {
          flex: 1;
        }
      }
      .lawyer-tip {
        margin-bottom: 20rpx;
        color: #666666;
        font-size: 26rpx;
      }
      .lawyer-item {
        margin-bottom: 10rpx;
        display: flex;

        .item-left {
          margin-right: 10rpx;
          .image-wrapper {
            width: 30rpx;
            height: 30rpx;
            image {
              width: 100%;
              height: 100%;
            }
          }
        }
        .item-txt {
          color: #aaa;
          font-size: 24rpx;
          flex: 1;
        }
      }
    }
  }
  .bot-con1 {
    padding: 0 30rpx;
    height: 800rpx;
    // overflow-y: scroll;
    width: calc(100% - 60rpx);
  }
  .bot-save{
    width: 100%;
    height: 102rpx;
    background: rgba(255, 255, 255, 0.39);
    box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.16);
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    .save-box{
      width: 60%;
      height: 60rpx;
       border-radius: 30rpx;
      background-color: #F9B804;
      color: #fff;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .bot-select-con{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20rpx 0rpx;
    .select-item-box{
      width: 50%;
      height: 60rpx;
      margin: 10rpx 0rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    // 选中
    .pitch-on{
      border:1px solid #F9B804;
      color: #F9B804;
    }
    // 未选中
    .un-pitch{
      border:1px solid #DDDDDD;
      color: #222222;
    }
  }
  .stage-scroll-box{
    max-height: 600rpx;
    padding-left: 15%;
    margin: 20rpx 0rpx;
    .select-item-box{
      width: 70%;
      height: 60rpx;
      margin: 10rpx 0rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    // 选中
    .pitch-on{
      border:1px solid #F9B804;
      color: #F9B804;
    }
    // 未选中
    .un-pitch{
      border:1px solid #DDDDDD;
      color: #222222;
    }
  }
}
::-webkit-scrollbar{
  width: 0!important;
  height: 0!important;
}
</style>
